<template>
	<view>
		<u-sticky>
			<view class="header-search" id="header">
				<view class="search-keyword">
					<u-search placeholder="请输入搜索内容" shape="round" bgColor="#FFFFFF" :inputStyle="searchStyle"
						v-model="params.keyword" :animation="true" searchIconShow="false" searchIcon=" "
						:showAction="true" @click="clickSearchIcon()" @search="clickSearchIcon()"
						@custom="clickSearchIcon()" @focus="focusSearch()" inputAlign="center">
						<view slot="label" class="label-text" @click="comprehensiveCondition()"
							:class="comprehensiveConditionShow?'select-label-text':'label-text'">
							{{ comprehensiveConditionName }}
						</view>
					</u-search>
				</view>
				<view class="search-more" @click="collapseChange()">
					<text class="search-more-title">{{searchMoreShow?'折叠':'筛选'}}</text>
					<image class="down-icon" :src="downIcon"
						:class="searchMoreShow? 'rotate-left-180': 'rotate-right-180'"></image>
				</view>
			</view>
		</u-sticky>
		<view class="search-warp">
			<!-- 更多筛选 -->
			<view class="transition search-more-panel" v-show="searchMoreShow"
				:class="searchMoreShow? 'transition-24': ''">
				<view class="screening-box">
					<u--form :model="params" ref="uForm">
						<u-form-item label="场地" labelWidth="130" class="search-more-input" @click="openStoreShow()"
							v-if="params.tabsMenuCurrent != 1">
							<u-input laceholder="不限" v-model="searchShowData.storeName" inputAlign="right" border="none"
								clearable readonly suffixIcon="arrow-right"></u-input>
						</u-form-item>
						<u-form-item label="开始时间" labelWidth="130" class="search-more-input"
							@click="selectTime(timeTypeEnum.START)">
							<u-input type="text" v-model="params.startTime" placeholder="不限" inputAlign="right"
								border="none" clearable readonly suffixIcon="arrow-right"></u-input>
						</u-form-item>

						<u-form-item label="结束时间" labelWidth="130" class="search-more-input"
							@click="selectTime(timeTypeEnum.END)">
							<u-input v-model="params.endTime" placeholder="不限" inputAlign="right" border="none"
								clearable readonly suffixIcon="arrow-right"></u-input>
						</u-form-item>
						<template v-if="params.tabsMenuCurrent != 1">
							<u-form-item label="设备" labelWidth="130" class="search-more-input"
								@click="openDeviceShow()">
								<u-input v-model="device" inputAlign="right" border="none" clearable readonly
									suffixIcon="arrow-right"></u-input>
							</u-form-item>

							<u-form-item label="订单状态" labelWidth="130" class="search-more-input"
								@click="orderStatusShow=true">
								<u-input v-model="stateShowTest" placeholder="不限" inputAlign="right" border="none"
									clearable readonly suffixIcon="arrow-right"></u-input>
							</u-form-item>
						</template>
						<template v-if="params.tabsMenuCurrent == 1">
							<u-form-item label="订单状态" labelWidth="130" class="search-more-input"
								@click="showSelectOrder=true">
								<u-input v-model="orderTypeName" placeholder="全部" fontSize="14px" inputAlign="right"
									border="none" clearable readonly suffixIcon="arrow-right"></u-input>
							</u-form-item>
							<u-form-item label="活动类型" labelWidth="130" class="search-more-input"
								@click="showSelectOrderType=true">
								<u-input v-model="activityOrderTypeName" placeholder="全部" fontSize="14px"
									inputAlign="right" border="none" clearable readonly
									suffixIcon="arrow-right"></u-input>
							</u-form-item>
						</template>
						<u-form-item>
							<view class="tool-btn">
								<u-button type="success" shape="circle" color="none"
									:customStyle="{ width:'280rpx', color: '#6072FF',height: '70rpx',border: '1px solid #6072FF',marginTop: '20rpx'}"
									@click="resetting()">重置
								</u-button>
								<u-button type="primary" shape="circle"
									:customStyle="{ width:'280rpx', color: '#1643776',height: '70rpx',marginTop: '20rpx'}"
									@click="confirmFilter()">确认筛选
								</u-button>
							</view>
						</u-form-item>
					</u--form>
					<!-- 设备 -->
					<deviceLinkage ref="device" @deviceData="getDevice"></deviceLinkage>
					<!-- 场地 -->
					<store ref="store" @storeData="getStore"></store>
					<!-- 开始时间 -->
					<u-datetime-picker ref="starttimePicker" :show="startTimePickerShow" v-model="params.startTime"
						mode="datetime" :maxDate="maxDate" :formatter="formatter" @confirm="confirm" :minDate="minDate"
						@cancel="startTimePickerShow = false" />
					<!-- 结束时间 -->
					<u-datetime-picker ref="endtimePicker" :show="endTimePickerShow" v-model="params.endTime"
						mode="datetime" :maxDate="maxDate" :formatter="formatter" @confirm="confirm" :minDate="minDate"
						@cancel="endTimePickerShow = false" />
				</view>
			</view>
			<view class="transition search-more-panel-comprehensive" v-show="comprehensiveConditionShow"
				:class="comprehensiveConditionShow? 'transition-24': ''">
				<view class="screening-box u-m-t-24">
					<u-radio-group v-model="params.comprehensiveConditionId" placement="column"
						@change="comprehensiveConditionGroupChange" size="20">
						<u-radio :customStyle="{marginBottom: '20px'}"
							v-for="(item, index) in comprehensiveConditionList" :key="index" :label="item.name"
							:name="item.id" activeColor="#6072FF" @change="comprehensiveConditionRadioChange(item)">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<u-overlay :show="searchMoreShow || comprehensiveConditionShow" zIndex="10"></u-overlay>
		<view class="overlay-warp u-p-30" v-show="focusSearchShow">
			<view class="u-flex u-row-between">
				<view class="search-history" style="width: 200rpx" @click="delAllSearchHistory()">
					<view class="u-m-r-10">搜索历史</view>
					<u-icon name="trash" v-if="searchHistoryList.length > 0"></u-icon>
				</view>
				<view class="cancel-search" @click="cancelSearch()">取消搜索</view>
			</view>

			<view class="grid-warp">
				<view v-for="(item,baseListIndex) in searchHistoryList" :key="baseListIndex" class="grid-text"
					@click="searchHistoryOneSearch(item)">
					{{item.searchTerm}}
				</view>
			</view>
		</view>
		<u-popup :show="orderStatusShow" :round="20" mode="bottom" :closeOnClickOverlay="true" @close="close"
			@open="open">
			<view class="order-status-containers">
				<view class="order-status-box" v-for="(item,index) in stateList" :key="index">
					<text>{{item.label}}</text>
					<view>
						<u-checkbox-group>
							<u-checkbox :checked="item.state" @change="radioChange(index)"></u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view class="order-status-operation">
					<u-button type="success" shape="circle" color="none"
						:customStyle="{ width:'280rpx', color: '#6072FF',height: '70rpx',border: '1px solid #6072FF',marginTop: '20rpx'}"
						@click="orderStatusShow=false">取消
					</u-button>
					<u-button type="primary" shape="circle"
						:customStyle="{ width:'280rpx', color: '#1643776',height: '70rpx',marginTop: '20rpx'}"
						@click="orderStatusConfirm()">确认
					</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 活动订单状态 -->
		<u-picker :show="showSelectOrder" keyName="name" :columns="tabsOrderList" @confirm="selectOrderConfirm"
			@cancel="showSelectOrder = false"></u-picker>
		<!-- 订单活动类型 -->
		<u-picker :show="showSelectOrderType" keyName="name" :columns="tabsOrderTypeList"
			@confirm="selectOrderTypeConfirm" @cancel="showSelectOrderType = false"></u-picker>
	</view>
</template>
<script>
	import store from '@//components/store/store.vue'
	import deviceLinkage from '@/components/device-linkage/device-linkage.vue';
	export default {
		components: {
			store,
			deviceLinkage,
		},
		data() {
			return {
        searchHistoryFunTypeEnum:this.$searchHistoryFunTypeEnum,
				staticFileUrl: this.$configPath.staticFileUrl,
				downIcon: this.$configPath.staticFileUrl + '/image/home/down.png',
				searchMoreShow: false,
				searchStyle: {
					width: '500rpx',
				},
				searchShowData: {
					storeName: '不限',
				},
				stateShowTest: '成功,部分退款,全额退款,退款中',
				orderStatusShow: false,
				startTimePickerShow: false,
				endTimePickerShow: false,
				showSelectOrder: false,
				showSelectOrderType: false,
				comprehensiveConditionShow: false,
				focusSearchShow: false,
				orderTypeName: '全部',
				activityOrderTypeName: '全部',
				timeTypeEnum: {
					START: 'start',
					END: 'end',
				},
				searchHistoryList: [],
				store: '不限',
				device: '不限',
				member: '不限',
				coinType: '不限',
				orderType: '不限',
				maxDate: Number(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)),
				minDate: Number(new Date().setFullYear((new Date().getFullYear() - 1))),
				stateList: [{
						label: '待支付',
						value: 0,
						state: false,
					},
					{
						label: '成功',
						value: 1,
						state: true,
					},
					{
						label: '关闭',
						value: 2,
						state: false,
					},
					{
						label: '撤单',
						value: 3,
						state: false,
					},
					{
						label: '部分退款',
						value: 6,
						state: true,
					},
					{
						label: '全额退款',
						value: 7,
						state: true,
					},
					{
						label: '退款中',
						value: 8,
						state: true,
					},
					{
						label: '退款失败',
						value: 9,
						state: false,
					},
				],
				tabsOrderTypeList: [
					[{
							name: '全部',
							type: null
						},
						{
							name: '限时秒杀',
							type: 1
						},
						{
							name: '拼团福利',
							type: 2
						},
						{
							name: '游戏币红包',
							type: 3
						},
						{
							name: '会员储值',
							type: 4
						}
					],
				],
				tabsOrderList: [
					[{
							name: '全部',
							status: null
						},
						{
							name: '待核销',
							status: 1
						},
						{
							name: '已完成',
							status: 2
						},
						{
							name: '已退款',
							status: 3
						}
					],
				],
				comprehensiveConditionList: [{
						id: 1,
						name: '综合条件',
					},
					{
						id: 2,
						name: '会员ID',
					},
					{
						id: 3,
						name: '设备编号',
					}, {
						id: 4,
						name: '交易单号',
					}, {
						id: 5,
						name: '商户单号',
					}, {
						id: 6,
						name: '平台单号',
					}, {
						id: 7,
						name: '会员手机号',
					}
				],
				comprehensiveConditionName: '综合条件',
				dateTimeFormat: 'yyyy-mm-dd hh:MM:ss',
				headerHeight: 0,
				//请求参数
				params: {
					merchantStoreId: '-1',
					deviceNo: '-1',
					memberId: '-1',
					coinType: '-1',
					status: null,
					orderStatusArray: [1, 6, 7, 8],
					keyword: '',
					pageNum: 1,
					totalPage: 1,
					endTime: '',
					startTime: '',
					tabsMenuCurrent: 0,
					// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
					comprehensiveConditionId: 1,
				},
			}
		},
		watch: {
			'params.startTime'(val, oldVal) {
				this.params.startTime = uni.$u.timeFormat(val, this.dateTimeFormat);
				console.log(this.params.startTime, "开始时间")
			},
			'params.endTime'(val, oldVal) {
				let dateStr = uni.$u.date(val, 'yyyy-mm-dd hh:MM');
				let time = dateStr + ':59';
				this.params.endTime = uni.$u.timeFormat(time, this.dateTimeFormat);
			},
		},
		methods: {
			// 初始化数据
			loadData(options) {
				//当天开始时间
				this.params.startTime = uni.$u.timeFormat(this.$date.getStartDate(), this.dateTimeFormat);
				//当天结束时间
				this.params.endTime = uni.$u.timeFormat(this.$date.getEndDate(), this.dateTimeFormat);
        if(options && Object.keys(options).length > 0){
          this.params.keyword = options.outTradeNo
          this.params.tabsMenuCurrent = options.tabsMenuCurrent
          if(options.memberId){
            this.params.keyword = options.memberId
            this.comprehensiveConditionName = '会员ID'
            this.params.comprehensiveConditionId = 2
            // console.log('参数',options)
          }
          if(options.startTime){
            this.params.startTime = options.startTime
          }
          if(options.endTime){
            this.params.endTime = options.endTime
          }
          this.tabsMenuListByIndex();
          //添加历史记录
          this.addSearchHistory()
        }
				//查询最近搜索词汇
				this.findSearchHistoryListByUserId();
			},
			Ready() {
				this.getPomHeight();
			},
			findSearchHistoryListByUserId() {
				// uni.showLoading({
				//   title: '获取数据中...',
				//   mask: true
				// })
				this.searchHistoryList = []
				this.$api('searchHistory.findSearchHistoryListByUserId',{funType:this.searchHistoryFunTypeEnum.ORDER_SEARCH_HISTORY}).then(res => {
					uni.stopPullDownRefresh();
					uni.hideLoading();
					if (res.status == 0) {
						this.searchHistoryList = res.data
					} else {
						getApp().err('获取关键字不成功：' + res.msg);
					}
				}).catch(err => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					getApp().err("获取关键字不成功：" + err.errMsg);
				})
			},
			//选择单选
			comprehensiveConditionRadioChange(data) {
				this.comprehensiveConditionName = data.name
				this.params.comprehensiveConditionId = data.id
				this.comprehensiveConditionShow = false
			},
			comprehensiveConditionGroupChange(e) {
				// console.log(e)
			},
			//坐标，标识操作什么类型
			tabsMenuCurrentIndex(tabsMenuCurrent,comprehensiveConditionId) {
				// console.log(tabsMenuCurrent,'tabsMenuCurrent')
				this.params.tabsMenuCurrent = tabsMenuCurrent;
        if(this.$u.test.isEmpty(comprehensiveConditionId)){
          this.comprehensiveConditionName = '综合条件'
          this.params.comprehensiveConditionId = 1
        }else{
          this.params.comprehensiveConditionId = comprehensiveConditionId
          this.comprehensiveConditionName = '会员ID'
        }

				this.tabsMenuListByIndex();
			},
      tabsMenuListByIndex(){
        if (this.params.tabsMenuCurrent == 2) {
          this.comprehensiveConditionList = [{
            id: 1,
            name: '综合条件',
          },
            {
              id: 2,
              name: '会员ID',
            },
            {
              id: 3,
              name: '设备编号',
            }, {
              id: 6,
              name: '平台单号',
            }, {
              id: 4,
              name: '抖音订单编号',
            }
          ]
        } else if (this.params.tabsMenuCurrent == 3) {
          this.comprehensiveConditionList = [{
            id: 1,
            name: '综合条件',
          },
            {
              id: 2,
              name: '会员ID',
            },
            {
              id: 3,
              name: '设备编号',
            }, {
              id: 6,
              name: '平台单号',
            }, {
              id: 4,
              name: '美团订单编号',
            }
          ]
        } else {
          this.comprehensiveConditionList = [{
            id: 1,
            name: '综合条件',
          },
            {
              id: 2,
              name: '会员ID',
            },
            {
              id: 3,
              name: '设备编号',
            }, {
              id: 4,
              name: '交易单号',
            }, {
              id: 5,
              name: '商户单号',
            }, {
              id: 6,
              name: '平台单号',
            }, {
              id: 7,
              name: '会员手机号',
            }
          ]
        }
      },
			//选择活动订单状态
			selectOrderConfirm(e) {
				this.orderTypeName = e.value[0].name
				this.params.status = e.value[0].status
				this.showSelectOrder = false

			},
			//选择活动订单活动类型
			selectOrderTypeConfirm(e) {
				this.activityOrderTypeName = e.value[0].name
				this.params.activityTypeId = e.value[0].type
				this.showSelectOrderType = false

			},
			//重置
			resetting() {
				//当天开始时间
				this.params.startTime = uni.$u.timeFormat(this.$date.getStartDate(), this.dateTimeFormat);
				//当天结束时间
				this.params.endTime = uni.$u.timeFormat(this.$date.getEndDate(), this.dateTimeFormat);
				//场地
				this.searchShowData.storeName = '不限'
				this.params.merchantStoreId = -1
				//设备
				this.device = '不限'
				this.params.deviceNo = '-1';
				//投币状态
				this.orderType = '不限'
				this.params.status = -1
			},
			//确认筛选
			confirmFilter() {
				if (this.params.startTime > this.params.endTime) {
					this.$helpers.toast('开始时间不能大于结束时间');
					return;
				}
        this.addSearchHistory();
				// console.log(this.params,'kkkkkkkk')
				uni.$emit("params", {
					params: this.params
				})
				this.searchMoreShow = false
			},
			radioChange(index) {
				this.stateList[index].state = !this.stateList[index].state
			},
			orderStatusConfirm() {
				this.orderStatusShow = false;
				this.stateShowTest = '';
				this.params.orderStatusArray = [];
				this.stateList.forEach(item => {
					if (item.state) {
						this.stateShowTest += this.stateShowTest ? ',' + item.label : item.label
						this.params.orderStatusArray.push(item.value);
					}
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.orderStatusShow = false
			},
			//综合条件弹框
			comprehensiveCondition() {
				this.comprehensiveConditionShow = !this.comprehensiveConditionShow
				this.searchMoreShow = false
				this.focusSearchShowMethod();
			},
			//点击输入框
			focusSearch() {
				this.focusSearchShow = true
				this.searchMoreShow = false
				this.comprehensiveConditionShow = false
				//查询历史记录
				this.findSearchHistoryListByUserId();
			},
			//点击搜索
			clickSearchIcon() {
				this.searchHistoryMethod();
			},

			//历史记录操作方法
			searchHistoryMethod() {
				//添加历史记录
				this.addSearchHistory()
				//关闭历史记录弹框
				this.focusSearchShowMethod();
				//查询订单列表
				uni.$emit("params", {
					params: this.params
				})
			},
			//标签搜索
			searchHistoryOneSearch(data) {
				this.params.keyword = data.searchTerm
        //关闭历史记录弹框
        this.focusSearchShowMethod();
        //查询订单列表
        uni.$emit("params", {
          params: this.params
        })
			},
			//取消搜索历史
			cancelSearch() {
				this.focusSearchShowMethod()
			},
			//删除所有的记录
			delAllSearchHistory() {
				let _this = this;
				if (this.$u.test.isEmpty(_this.searchHistoryList)) {
					getApp().err('暂无历史记录');
					return
				}
				uni.showModal({
					title: '提示',
					content: '确定要删除所有搜索历史记录?',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍等...',
								mask: true
							})
							_this.$api('searchHistory.delAllSearchHistory',{funType:_this.searchHistoryFunTypeEnum.ORDER_SEARCH_HISTORY}).then(res => {
								uni.hideLoading();
								if (res.data > 0) {
									_this.$helpers.toast("删除成功");
									_this.searchHistoryList = []
								} else {
									_this.$helpers.toast("删除失败");
								}
							})
						}
					}
				});
			},
			//添加搜索
			addSearchHistory() {
        if(this.$u.test.isEmpty(this.$u.trim(this.params.keyword, 'all'))){
          console.log('没有关键字')
          return
        }
				this.$api('searchHistory.addSearchHistory', {
					keyword: this.$u.trim(this.params.keyword, 'all'),
          funType:this.searchHistoryFunTypeEnum.ORDER_SEARCH_HISTORY
				}).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.status == 0) {
						if (!uni.$u.test.isEmpty(res.data)) {
							this.returnOfGoodsList = res.data;
						}
					} else {
						getApp().err(res.msg);
					}
				})
			},
			//打开选择设备
			openDeviceShow() {
				this.$refs.device.open();
			},
			//设备
			getDevice(data) {
				this.device = data.name
				this.params.deviceNo = data.deviceNo
			},
			//时间格式
			formatter(type, value) {
				if (type === 'year') return `${value}年`
				if (type === 'month') return `${value}月`
				if (type === 'day') return `${value}日`
				if (type === 'hour') return `${value}时`
				if (type === 'minute') return `${value}分`
				return value
			},
			//确认选择时间
			confirm(e) {
				if (this.timeStr === this.timeTypeEnum.START) {
					this.startTimePickerShow = false;
				} else if (this.timeStr === this.timeTypeEnum.END) {
					this.endTimePickerShow = false;
				}
			},
			//选择时间弹框
			selectTime(str) {
				this.timeStr = str;
				if (str == this.timeTypeEnum.START) {
					this.startTimePickerShow = true;
				} else if (str == this.timeTypeEnum.END) {
					this.endTimePickerShow = true;
				}
			},
			//筛选
			collapseChange() {
				this.searchMoreShow = !this.searchMoreShow;
				this.comprehensiveConditionShow = false
				this.focusSearchShowMethod();
			},
			focusSearchShowMethod() {
				this.focusSearchShow = false
			},
			//打开选择场地
			openStoreShow() {
				this.$refs.store.init(true);
			},
			//确定选择场地
			getStore(data) {
				this.searchShowData.storeName = data.label;
				this.params.merchantStoreId = data.value + '';
			},
			//计算滚动条高度
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#header').boundingClientRect()
				query.exec(res => {
					this.headerHeight = wx.getSystemInfoSync().windowHeight - 32;
					for (let i = 0; i < res.length; i++) {
						this.headerHeight -= res[i].height;
					}
					this.$emit('headerHeight', this.headerHeight);
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.overlay-warp {
		position: absolute;
		background: white;
		z-index: 99;
		width: -webkit-fill-available;
		/* 让元素宽度填充可用空间 */
		height: 85%;
		border-radius: 20rpx 20rpx 0 0;

		.grid-text {
			font-size: 22rpx;
			color: rgba(0, 0, 0, 0.7);
			background: rgba(176, 176, 176, 0.2);
			border-radius: 36rpx;
			padding: 10rpx 24rpx;
			margin-right: 20rpx;
			margin-top: 30rpx;
		}

		.grid-warp {
			display: flex;
			/* 或者使用 block */
			flex-wrap: wrap;
			/* 允许换行 */
		}

		.cancel-search {
			font-size: $f-sm;
			color: rgb(96, 114, 255);
		}

		.search-history {
			font-size: $f-sm;
			color: rgba(13, 13, 13, 0.9);
			display: flex;
			align-items: center;
		}
	}

	.order-status-containers {
		padding: 20rpx 50rpx 0;

		.order-status-box {
			padding: 10rpx 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.order-status-operation {
			display: flex;
			justify-content: space-between;
		}
	}

	.rotate-left-180 {
		animation: rotateleft180 0.3s linear both;

		@keyframes rotateleft180 {
			0% {
				transform: rotate(0deg);

			}

			50% {
				transform: rotate(-90deg);
			}

			100% {
				transform: rotate(-180deg);
			}
		}
	}

	.rotate-right-180 {
		animation: rotate180 0.3s linear both;

		@keyframes rotate180 {
			0% {
				transform: rotate(-180deg);
			}

			50% {
				transform: rotate(-90deg);
			}

			100% {
				transform: rotate(0deg);
			}
		}
	}

	.header-search {
		background: linear-gradient(rgba(236, 245, 255, 255) 0%, rgba(236, 245, 255, 255) 100%);
		padding: 24rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 999;

		.search-keyword {
			width: 570rpx;
		}

		.label-text {
			color: rgba(13, 13, 13, 0.8);
			font-size: $f-sm;
			border-right: 1rpx solid rgba(0, 0, 0, 0.16);
			padding-bottom: 4rpx;
			padding-right: 10rpx;
		}

		.select-label-text {
			color: rgb(96, 114, 255);
		}

		.search-more {
			display: flex;
			flex-direction: row;
			align-items: center;
			// padding: 10rpx 20rpx;

			.search-more-title {
				color: rgba(13, 13, 13, 0.9);
				font-size: $f-base;
				line-height: 40rpx;
				margin-right: 27rpx;
			}

			.down-icon {
				height: 10rpx;
				width: 17rpx;
			}
		}
	}

	.tool-btn {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 100%;
		border-top: 1px solid #fafafa;
		height: 100rpx;
		background: $uni-bg-color;
	}

	.screening-box {
		padding: 0rpx 15rpx 30rpx 27rpx;
	}

	.search-more-panel-comprehensive {
		position: absolute;
		background: white;
		z-index: 999;
		width: 100vw;
	}

	.search-more-panel {
		position: absolute;
		background: linear-gradient(rgba(236, 245, 255, 255) 0%, rgba(255, 255, 255, 1) 100%);
		z-index: 999;
		width: 100vw;

		.u-form-item__body__left__content__label {
			color: rgba(13, 13, 13, 0.7);
			font-size: $f-base;
			line-height: 40rpx;
		}
	}

	.search-warp {}
</style>
